import { StyleSheet, View, Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, ButtonText, toast } from "gluestack-ui";
import { useTranslation } from "react-i18next";
import { LangSetting } from "@/components/LangSetting";

export default function HomeScreen() {
  const { t } = useTranslation();

  return (
    <SafeAreaView style={styles.container}>
      {/* 顶部区域 */}
      <View style={styles.header}>
        <Text>{t("Hello")}</Text>
        <Text>🔔</Text>
        <LangSetting />
      </View>

      {/* 贷款卡片区域 */}
      <View style={styles.card}>
        <Text style={styles.cardTitle}>{t("วงเงินสินเชื่อของคุณ")}</Text>
        <Text style={styles.amount}>฿0</Text>
        <View style={styles.applyButton}>
          <Button
            onPress={() => {
              // toast.show("操作成功");
              toast.show("这是一条消息");
            }}
          >
            <ButtonText>申请贷款</ButtonText>
          </Button>
        </View>
      </View>

      {/* 快捷操作区 */}
      <View style={styles.actions}>
        <View style={styles.actionButton}>
          <Text>账单</Text>
        </View>
        <View style={styles.actionButton}>
          <Text>关注</Text>
        </View>
      </View>

      {/* 产品特点区域 */}
      <View style={styles.features}>
        <Text style={styles.sectionTitle}>产品特点</Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f5f5f5",
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 16,
  },
  card: {
    backgroundColor: "#FBAA19",
    margin: 16,
    padding: 20,
    borderRadius: 12,
  },
  cardTitle: {
    color: "white",
    fontSize: 20,
  },
  amount: {
    color: "white",
    fontSize: 32,
    marginVertical: 16,
  },
  applyButton: {
    backgroundColor: "white",
    padding: 12,
    borderRadius: 8,
    alignItems: "center",
  },
  actions: {
    flexDirection: "row",
    padding: 16,
    gap: 12,
  },
  actionButton: {
    flex: 1,
    backgroundColor: "white",
    padding: 16,
    borderRadius: 12,
    alignItems: "center",
  },
  features: {
    padding: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "600",
  },
});
